import TextShow from "./TextShow";
import Textarea from "./Textarea";
import TableTemplate from "./TableTemplate";
import AddButton from "./AddButton";
import Select from "./Select";
import Box from "./Box";
import "./index.less";

export interface CellType {
    new(arrt?: any, mode?: 1 | 2 | 3 | 4, template?: any): CellType;
    type: number;
    parentContainer?: any;
    attrData: any;
    tableInstance?: any;
    setDisabled: (arg: boolean) => void;
    setVisible: (arg: boolean) => void;
    setReadonly: (arg: boolean) => void;
    getAttrData: () => any;
    getAttribNode?: () => any;
    getValue?: () => any;
    setValue?: (arg: any) => void;
    render: () => HTMLElement;
    renderAfter: () => void;
    reset?: () => void;
    sizeChange?: () => void;
}
interface WordCellItemType {
    id: number;
    name: String;
    component: CellType;
    attribute?: any;
}
interface WordCellType {
    new(): WordCellType;
    addCel: (arg: WordCellItemType) => void;
    removeCellById: (id: number) => void;
    removeCellByComponent: (component: any) => void;
    forEach(callbackfn: (value: WordCellItemType, index: number, array: WordCellItemType[]) => void, thisArg?: any): void;
    map<U>(callbackfn: (value: WordCellItemType, index: number, array: WordCellItemType[]) => U, thisArg?: any): U[];
    find: (id: number) => WordCellItemType | undefined;
    getComponent: (template: any, mode: 1 | 2 | 3 | 4, attribute?: any, style?: any) => any;
}

function WordCellClass(this: WordCellType) {
    const components: Array<WordCellItemType> = [
        {
            id: 1,
            name: '文本显示框',
            component: TextShow
        },
        {
            id: 2,
            name: '文本输入框',
            component: Textarea
        },
        {
            id: 3,
            name: '表格',
            component: TableTemplate
        },
        {
            id: 5,
            name: '新增按钮',
            component: AddButton
        },
        {
            id: 6,
            name: '下拉框',
            component: Select
        },
    ];
    this.addCel = function (arg) {
        if (arg instanceof Object && arg.id) {
            if (arg.id < 20) {
                console.warn('新增单元id已经存在');
                return false;
            }
            const cell = components.find((item) => arg.id === item.id);
            if (cell) {
                console.warn('新增单元id已经存在');
                return false;
            }
            components.push(arg);
        } else {
            console.warn('传入数据格式不对，{id: number; name: string; component: class}');
        }
    }
    this.removeCellById = function (id) {
        const size = components.length - 1;
        let hasRemove = false;
        if (id < 20) {
            return false;
        }
        for (let i = 0; i < components.length; i += 1) {
            if (id === components[i].id) {
                hasRemove = true;
            }
            if (hasRemove && i < size) {
                components[i] = components[i + 1];
            }
        }
        if (hasRemove) {
            components.pop();
        }
        return hasRemove;
    }
    this.removeCellByComponent = function (component) {
        const size = components.length - 1;
        let hasRemove = false;
        for (let i = 0; i < components.length; i += 1) {
            if (component === components[i].component && components[i].id > 20) {
                hasRemove = true;
            }
            if (hasRemove && i < size) {
                components[i] = components[i + 1];
            }
        }
        if (hasRemove) {
            components.pop();
        }
        return hasRemove;
    }
    this.forEach = function (fun) {
        if (fun instanceof Function) {
            components.forEach(fun);
        }
    }
    this.map = function (fun) {
        let arr: Array<any> = [];
        if (fun instanceof Function) {
            arr = components.map(fun);
        }
        return arr;
    }
    this.find = function (id) {
        return components.find((item) => id === item.id);
    }
    let preId: any;
    let preComponent = TextShow;
    let preAttrib: any;
    this.getComponent = function (template, mode, attribute = {}, style) {
        let obj;
        const { type, x, y } = attribute;
        if (type === undefined) {
            obj = new TextShow(attribute, mode, template);
        }
        if (preId === attribute.type) {
            obj = new preComponent(preAttrib ? { ...preAttrib, ...attribute } : attribute, mode, template);
        }
        if (!obj) {
            const temp = components.find((item) => item.id === type);
            if (temp) {
                preAttrib = temp.attribute
                obj = new temp.component(preAttrib ? { ...preAttrib, ...attribute } : attribute, mode, template);
                preComponent = temp.component;
                preId = type;
            } else {
                obj = new TextShow(attribute, mode, template);
                preComponent = TextShow;
                preAttrib = undefined;
            }
        }
        return obj;
        // return new Box({ child: obj, x, y, style });
    }
    return this;
}
const WordCell = WordCellClass as unknown as WordCellType;
const wordCells = new WordCell();

export default wordCells;